<template>
    <div>
        <h1>{{ count }}---{{ hi }}---{{ num }}---{{ userName }}</h1>
        <button @click="fn(4)">点击</button>
    </div>
</template>

<script>
//vuex内置四个辅助函数
        import { mapActions, mapGetters,mapMutations,mapState } from 'vuex';
    export default {
        data(){
            return{

            }
        },
        methods:{
            //mapActions mapMutations
            // ...mapActions(['handelChange'])
            ...mapActions({
                //自定义名字，vuex中action的方法名
               fn:"handleChange" 
            }),
            handle(){}
        },
        computed:{
            // 访问子模块
            // mapxxxs("模块名字",["属性1","属性2",...])
            // mapxxxs("模块名字",{
            // "姓名1","vuex中的原名子1",
            // "姓名2","vuex中的原名子2",
            // })



            //mapGEtters mapstate
            // 相当于 this.$store.state mapState中数组的名字要是vuex中的一致
            ...mapState(["count","hi"]),
            ...mapGetters(["num"]),
            ...mapState("user",["userName"])

        }
    }
</script>

<style lang="scss" scoped>

</style>